import React from 'react';
import { Layout, Icon, Row } from 'antd';
import '../../style/layouts/main.css';
import HeaderNav from '../public/HeaderNav';
import TabNav from '../public/TabNav';
import Sidebar from '../public/Sidebar';
import CustomBreadcrumb from '../public/Breadcrumb';
import Routers from '../../router';
const { Header, Content, Footer, Sider} = Layout;

class Main extends React.Component {
	state = {
		collapsed: false,
	};
	toggle = () => {
		this.setState({
			collapsed: !this.state.collapsed,
		});
	}
	render() {
		return (
			<Layout style={{ minHeight: '100vh' }}>
				{/*<Affix>*/}
					<Sider
						style={{minHeight:'100vh'}}
						trigger={null}
						collapsible
						collapsed={this.state.collapsed}
					>
						<div className="logo" />
						<Sidebar/>
					</Sider>
				{/*</Affix>*/}
				<Layout>
					{/*<Affix>*/}
						<Header className='custom-header' style={{ background: '#fff', padding: 0 }} >
							<Icon
								className="trigger custom-trigger"
								type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
								onClick={this.toggle}
							/>
							<HeaderNav className='header-nav'/>
						</Header>
						<Row style={{ margin: '12px 16px', background: '#fafafa' }}>
							<TabNav/>
						</Row>
						<CustomBreadcrumb />
					{/*</Affix>*/}
					<Content style={{ margin: '0 16px' }}>
						<Routers/>
					</Content>
					<Footer style={{ textAlign: 'center' }}>
						Ant Design ©2018 Created by shantongxu@xstnet.com
					</Footer>
				</Layout>
			</Layout>
		);
	}
}

export default Main;